<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
	<meta  charset="utf-8"/>
    <meta name="description" content="U联赛是中国大学生" />
    <meta name="Keyword" content="U联赛，大学生篮球联赛，大学篮球，篮球联赛" />
	<title>精彩图库</title>
	<link rel="stylesheet" type="text/css" href="../../../admin/site/common/css/global.css" />
	<script type="text/javascript" src="../../../admin/site/common/js/jquery-1.11.1.min.js"></script>
	
</head>
<body>
	<div class="page">
		<div class="toper">
		</div><!--顶部广告banner-->
		<div class="header" id="header">
			<input id="sessionWeixin" type="hidden" th:value="${session.indexWeixin}"/>
			<input id="sessionFans" type="hidden" th:value="${session.indexFans}"/>
			<input id="sessionUser" type="hidden" th:value="${session.user==null?'1':'2'}"/>
			<input id="sessionUserName" type="hidden" th:if="${session.user!=null &amp;&amp; session.user.userName != null}" th:value="${session.user.userName}"/>
		</div><!--复合导航栏-->
		
		<div class="bodymain picturemain">
			<div class="bdsharebuttonbox quicklink" id="fenxiang"></div>
			<div class="data-nav">
				<a href="/index.html">ULeague</a><span>&gt;</span><a href="/imgModel/pictureList.html">图片</a><span>&gt;</span><a class="data-nav-now" href="#"><span th:text="${imgModel.name}"></span></a>
			</div>
			<div class="picd-title">
				<span th:text="${imgModel.name}"></span><div class="picd-tip">提示：支持键盘翻页 ←左 右→</div>
			</div>
			<div class="picd-imgblock">
				<div class="picd-tab">
					<div class="picd-ltab" id="ltab"></div>
					<div class="picd-rtab" id="rtab"></div>		
				</div>
				<div class="picd-imgin" id="imgin">
					<div class="picd-imgp" th:each="imgStorage:${imgStorageList}">
						<img th:src="${imgStorage.imgPath}" />
					</div>
				</div>
			</div>
			<div class="picd-info">
				<div class="picd-page">
					<span class="picd-nowpage" id="picd-nowpage">1</span>/<span id="picd-alpage" th:text="${imgStorageList.size()}"></span>
					<div class="bdimgshare-bg share">	
						<div class="bdsharebuttonbox sharenav">
							<li>分享到:</li>
							<a href="#" class="bds_more" data-cmd="more"></a>
							<a title="分享到微信" href="#" class="bds_weixin" data-cmd="weixin"></a>
							<a title="分享到新浪微博" href="#" class="bds_tsina" data-cmd="tsina"></a>
							<a title="分享到QQ空间" href="#" class="bds_qzone" data-cmd="qzone"></a>
							<a title="分享到腾讯微博" href="#" class="bds_tqq" data-cmd="tqq"></a>
							<a title="分享到人人网" href="#" class="bds_renren" data-cmd="renren"></a>
						</div>
						<script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"http://112.124.25.199:8182/images","bdStyle":"0","bdSize":"24"},"share":{}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];</script>
					</div>
				</div>
				<div class="picd-t" id="picd-t">
					<div class="picd-text" th:each="imgStorage:${imgStorageList}" th:utext="${imgStorage.mark}"></div>
				</div>	
				<div class="picd-time"></div>
			</div>
			<div class="mainbottomblank">
			</div>
		</div><!--picture detail-->
		<div class="footer" id="footer" th:utext="${session.indexFooter}">
		</div><!--页面底部-->
	</div>
</body>
	<script type="text/javascript" src="../../../admin/site/common/js/header.js"></script>
	<script type="text/javascript">
	$(function(){
		diu();
		var pos = 1;
		$('#picd-alpage').text($('#imgin img').length);
		$('#picd-nowpage').text('1');
		$(document).keydown(function(event){
			e = event ? event :(window.event ? window.event : null);
			if(e.keyCode == 37){
				var imgleng = $('#imgin img').length;
				if(pos >1){
				$('#imgin').animate({marginLeft:(pos-2)*(-960)+"px"},200);
				var m = pos-2;
				$('#picd-t .picd-text').hide();
				$('#picd-t').find('.picd-text:eq('+m+')').show();
				pos -=1;
				if(imgleng>pos){
				$('#rtab').addClass('picd-on');
				}
				$('#picd-nowpage').text(pos);
				};
				if(pos == 1){
				$('#ltab').removeClass('picd-on');
				}
			}else if(e.keyCode == 39){
				var imgleng = $('#imgin img').length;
				if(imgleng>pos){
				$('#imgin').animate({marginLeft:pos*(-960)+"px"},200);
				$('#picd-t .picd-text').hide();
				$('#picd-t').find('.picd-text:eq('+pos+')').show();
				pos +=1;
				if(pos > 1){
				$('#ltab').addClass('picd-on');
				}
				$('#picd-nowpage').text(pos);
				};
				if(pos == imgleng){
				$('#rtab').removeClass('picd-on');
				}
			}
		});
		$('#ltab').on('click',function(){
			var imgleng = $('#imgin img').length;
			if(pos >1){
			$('#imgin').animate({marginLeft:(pos-2)*(-960)+"px"},200);
			var m = pos-2;
			$('#picd-t .picd-text').hide();
			$('#picd-t').find('.picd-text:eq('+m+')').show();
			pos -=1;
			if(imgleng>pos){
			$('#rtab').addClass('picd-on');
			}
			$('#picd-nowpage').text(pos);
			};
			if(pos == 1){
			$(this).removeClass('picd-on');
			}
		});
		$('#rtab').on('click',function(){
			var imgleng = $('#imgin img').length;
			if(imgleng>pos){
			$('#imgin').animate({marginLeft:pos*(-960)+"px"},200);
			$('#picd-t .picd-text').hide();
			$('#picd-t').find('.picd-text:eq('+pos+')').show();
			pos +=1;
			if(pos > 1){
			$('#ltab').addClass('picd-on');
			}
			$('#picd-nowpage').text(pos);
			};
			if(pos == imgleng){
			$(this).removeClass('picd-on');
			}
		});
	});
	function diu(){
		var imgleng = $('#imgin img').length;
		if(imgleng > 1){
		$('#rtab').addClass('picd-on');
		}
		$('#picd-t').find('.picd-text:eq(0)').show();
	}
	
	$(function(){
		  $("#nav-picture").attr("class","nav-clickon");
	});
	</script>
</html>